<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="商品名称">
                <a-input allow-clear placeholder="请输入商品名称" v-model="queryParam.goods_name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="订单类型">
                <a-select v-model="queryParam.type" allowClear placeholder="请选择订单状态">
                  <a-select-option value="2">全部</a-select-option>
                  <a-select-option value="0">转单订单</a-select-option>
                  <a-select-option value="1">采购订单</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="起止时间">
                <a-range-picker
                  style="width: 100%"
                  format="YYYY-MM-DD HH:mm"
                  valueFormat="YYYY-MM-DD HH:mm"
                  :placeholder="['开始时间', '结束时间']"
                  v-model="queryTime"
                  @change="changeTime"
                  :show-time="{
                    hideDisabledOptions: true,
                  }"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList">查询</a-button>
                <!-- <a-button class="exportData" type="primary" @click="exportData">导出</a-button> -->
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.status" @change="getList">
          <a-radio-button value="2"> 全部 </a-radio-button>
          <a-radio-button value="1"> 已集采 </a-radio-button>
          <a-radio-button value="0"> 未集采 </a-radio-button>
        </a-radio-group>

        <!-- <div class="createOrderTime">
          <a-range-picker
            format="YYYY-MM-DD HH:mm"
            valueFormat="YYYY-MM-DD HH:mm"
            :placeholder="['开始时间', '结束时间']"
            v-model="queryTime"
            @change="createOrderTimeChange"
          />&nbsp;
          <a-button @click="createOrder" type="primary"> 一键生成配货单 </a-button>
        </div> -->
      </div>

      <a-table
        :rowKey="
          (r, i) => {
            return r.id
          }
        "
        :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
        size="default"
        :columns="columns"
        :data-source="list"
        :customRow="customRow"
        :scroll="{ x: 'max-content' }"
        :pagination="{
          total: this.totalCount,
          showSizeChanger: false,
          onChange: this.tablePageChange,
        }"
      >
        <span slot="storeContent" slot-scope="text, record">
          <div style="padding-bottom: 20px">订单号：{{ record.order_no }}</div>
          <div class="content">
            <div class="img">
              <a-avatar shape="square" :size="48" icon="user" :src="record.store.logo" />
            </div>

            <div class="txt">
              <h3>{{ record.store.name }}</h3>
              <p>{{ record.storetel }}</p>
            </div>
          </div>
        </span>

        <span slot="content" slot-scope="text, record">
          <div style='padding-bottom: 20px;' v-if='record.mch_order_no'>商家订单号：{{ record.mch_order_no }}</div>
          <div class="content">
            <div class="img">
              <a-avatar shape="square" :size="48" icon="user" :src="record.goods_list.pic_url" />
            </div>

            <div class="txt">
              <h3>{{ record.goods_list.goods_name }}</h3>
              <p>
                {{
                  record.goods_list.goods_attr
                    ? record.goods_list.goods_attr
                        .map((item) => {
                          return item.attr_name
                        })
                        .join(' ')
                    : '规格:默认'
                }}
                {{ '数量:x' + record.goods_list.goods_num }}
              </p>
            </div>
          </div>
        </span>

        <span slot="status" slot-scope="text, record">
          <a-badge :color="getStatus(record.status)[1]" :text="getStatus(record.status)[0]" />
        </span>

        <span slot="created_at" slot-scope="text, record">
          {{ record.created_at > 0 ? $moment(record.created_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
        </span>

        <span slot="admin_name" slot-scope="text, record">
          <div style='padding-bottom: 20px;' v-if='record.mch_order_no'>订单金额：{{ record.pay_price }}</div>
          <div>{{record.admin_name}}</div>
          <div>{{record.admin_tel}}</div>
          <div>{{record.admin_address}}</div>

        </span>

        <span slot="type" slot-scope="text, record">
          <a-tag color="green">
            {{ record.type === '0' ? '转单订单' : '采购订单' }}
          </a-tag>
        </span>
      </a-table>

      <!--      <div style="float: right;margin-top:10px;">-->
      <!--        <a-pagination v-model="queryParam.page" @change="tablePageChange" :total="totalCount" />-->
      <!--      </div>-->
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { agentOrderGroupList, agentOrderDistribution } from '@/api/purchase/supplier'

export default {
  data() {
    return {
      // 搜索参数
      queryParam: {
        page: 1,
        limit: 10,
        status: '2',
        start_time: '',
        end_time: '',
        goods_name: '',
        type: '2'
      },
      create_order_start_time: '',
      create_order_end_time: '',
      list: [],
      queryTime: [],
      btnLoading: false,

      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 80
        },
        {
          title: '店铺信息',
          scopedSlots: {
            customRender: 'storeContent'
          },
          width: 250
        },
        {
          title: '商品信息',
          scopedSlots: {
            customRender: 'content'
          },
          width: 300
        },
        {
          title: '服务商名称',
          scopedSlots: {
            customRender: 'admin_name'
          }
        },
        {
          title: '订单类型',
          scopedSlots: {
            customRender: 'type'
          }
        },
        {
          title: '状态',
          scopedSlots: {
            customRender: 'status'
          }
        },
        {
          title: '发布时间',
          dataIndex: 'created_at',
          scopedSlots: {
            customRender: 'created_at'
          },
          sorter: (a, b) => a.created_at - b.created_at,
          width: 200
        }
        // {
        //   title: '操作',
        //   scopedSlots: {
        //     customRender: 'action'
        //   }
        // }
      ]
    }
  },

  computed: {
    getStatus() {
      return status => {
        let text, color
        switch (status) {
          case '0':
            text = '未集采'
            color = 'rgba(0, 0, 0, 0.25)'
            break

          case '1':
            text = '已集采'
            color = '#65C817'
            break

          case '2':
            text = '全部'
            color = '#FF4D4F'
            break
        }
        return [text, color]
      }
    }
  },

  created() {
    this.getList()
  },

  methods: {
    createOrderTimeChange(dateString) {
      if (dateString.length) {
        this.create_order_start_time = dateString[0]
        this.create_order_end_time = dateString[1]
      } else {
        this.create_order_start_time = ''
        this.create_order_end_time = ''
      }
    },
    createOrder(order_id) {
      let {create_order_start_time: start_time, create_order_end_time: end_time} = this;
      this.$confirm({
        title: '提示',
        content: '是否执行此次操作？',
        onOk: () => {
          agentOrderDistribution({
            start_time,
            end_time
          }).then(res => {
            if (!res.code) {
              this.tablePageChange(1)
              this.$message.success(res.msg)
              return
            }

            this.$message.error(res.msg)
          })
        },
        onCancel() {}
      })
    },

    // 分页请求
    tablePageChange(e) {
      this.queryParam.page = e
      this.getList()
    },

    // 获取数据
    async getList() {
      const hide = this.$message.loading('加载中...', 1000)
      const res = await agentOrderGroupList(this.queryParam)
      if (res.code == 0) {
        let list = res.data.data || []

        list = list.map(el => {
          let goods_list = el.goods_list
          goods_list.goods_attr = JSON.parse(goods_list.goods_attr)
          return el
        })

        this.list = list
        this.totalCount = res.data.count
      }
      hide()
    },

    // 切换筛选时间
    changeTime(e) {
      if (e.length) {
        this.queryParam.start_time = e[0]
        this.queryParam.end_time = e[1]
      } else {
        this.queryParam.start_time = ''
        this.queryParam.end_time = ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.exportData {
  margin-left: 20px;
}

.content {
  display: flex;
  align-items: center;
  height: 48px;
  max-width: 300px;
  overflow: hidden;

  .txt {
    margin-left: 16px;
    flex: 1;
    overflow: hidden;

    * {
      margin: 0;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    h3 {
      color: rgba(0, 0, 0, 0.85);
    }

    p {
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
.createOrderTime {
  display: flex;
  align-items: center;
}
</style>
